<template>
  <div class="swiper-container">
    <button class="prev-btn" @click="prevSlide">&#10094;</button>
    <button class="next-btn" @click="nextSlide">&#10095;</button>
    <div class="slider-content">
      <ul>
        <li
          class="slider-item"
          v-for="(item, index) in sliderItems"
          :key="index"
          v-show="index === currentIndex"
        >
          <div class="slider-item-img">
            <div>
              <div>
                <img :src="item.imgSrc" />
              </div>
            </div>
          </div>
          <div class="slider-item-title">
            <span>{{ item.title }}</span>
          </div>
          <div class="slider-item-text">
            <div>
              <p v-for="(paragraph, pIndex) in item.paragraphs" :key="pIndex">
                {{ paragraph }}
              </p>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import imgSrc2 from "./assets/img/2.webp";
import imgSrc3 from "./assets/img/3.webp";
import imgSrc4 from "./assets/img/4.webp";

const currentIndex = ref(0);

const sliderItems = reactive([
  {
    imgSrc: imgSrc2,
    title: "Title1",
    paragraphs: [
      "“Iinct,”* Gabrielle Chanel playfully said. One of the hallmarks of the designer's fiery temperament was never to be confined by anyone, let alone by men. This is one of the paradoxes of this great lover. Independent in her personal life, Gabrielle Chanel was just as much so in her business life.",
      "Although she was financially supported by Boy Capel in the beginning, who helped her open her La Pausa villa built in Roquebrune Cap-Martin, on the Riviera. And of course, 31 rue Cambon in Paris, where she set up her apartments. To be free and independent was one of the finest",
      "Gabrielle Chanel in her “La Pausa” villa, 1938",
      "© Photo Roger Schall - Schall Collection",
    ],
  },
  {
    imgSrc: imgSrc3,
    title: "Title2",
    paragraphs: [
      "“I am the only volcanic crater in the Auvergne that is not extinct,”* Gabrielle Chanel playfully said. One of the hallmarks of the designer's by anyone, let alone by men. This is one of the paradoxes of this great lover. Independent in her personal life, Gabrielle Chanel was just as much so in her business life.",
      "Although she was financially supported by Boy Capel in the beginning, who helped her open her La Pausa villa built in Roquebrune Cap-Martin, on the Riviera. And of course, 31 rue Cambon in free and independent was one of the finest examples she set for women. * The Allure of Chanel by Paul Morand, Hermann, 1996.",
      "Gabrielle Chanel in her “La Pausa” villa, 1938",
      "© Photo Roger Schall - Schall Collection",
    ],
  },
  {
    imgSrc: imgSrc4,
    title: "Title3",
    paragraphs: [
      "“I am the only volcanic crater in the Auvergne that is not extinct,”* Gabrielle Chanel playfully said. One of the hallmarks of the designer's fiery temperament was never to be confined by Independent in her personal life, Gabrielle Chanel was just as much so in her business life.",
      "Although she was financially supported by Boy Capel in the beginning, who helped her open her La Cambon in Paris, where she set up her apartments. To be free and independent was one of the finest examples she set for women. * The Allure of Chanel by Paul Morand, Hermann, 1996.",
      "Gabrielle Chanel in her “La Pausa” villa, 1938",
      "© Photo Roger Schall - Schall Collection",
    ],
  },
]);

// 后退
const prevSlide = () => {
  const currentTitle =
    document.querySelectorAll(".slider-item-title")[currentIndex.value]; // 找到当前显示的标题元素

  if (currentIndex.value > 0) {
    currentIndex.value--;
    currentTitle.classList.add("left-transition"); // 添加类名
    setTimeout(() => {
      currentTitle.classList.remove("left-transition"); // 移除类名
    }, 6000);
  } else {
    currentIndex.value = sliderItems.length - 1;
    currentTitle.classList.add("left-transition"); // 添加类名
    setTimeout(() => {
      currentTitle.classList.remove("left-transition"); // 移除类名
    }, 6000);
  }
};
// 前进
const nextSlide = () => {
  const currentTitle =
    document.querySelectorAll(".slider-item-title")[currentIndex.value]; // 找到当前显示的标题元素
  if (currentIndex.value < sliderItems.length - 1) {
    currentIndex.value++;
    currentTitle.classList.add("right-transition"); // 添加类名
    setTimeout(() => {
      currentTitle.classList.remove("right-transition"); // 移除类名
    }, 6000);
  } else {
    currentIndex.value = 0;
    currentTitle.classList.add("right-transition"); // 添加类名
    setTimeout(() => {
      currentTitle.classList.remove("right-transition"); // 移除类名
    }, 6000);
  }
};
</script>

<style lang="scss" scoped>
.swiper-container {
  padding: 20px;
  position: relative;
}
.prev-btn,
.next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.5);
  border: none;
  color: black;
  font-size: 24px;
  cursor: pointer;
  transition: all 0.6s ease;
}

.prev-btn {
  left: 10px;
}

.next-btn {
  right: 10px;
}
.slider-content {
  width: 100%;
  background: black;
  display: block;
  position: relative;
  ul {
    width: 100%;
    height: 680px;
    overflow: hidden;
    .slider-item {
      .slider-item-img {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 49%;
        height: 100%;
        position: absolute;
        overflow: hidden;
      }
      .slider-item-title {
        width: 100%;
        height: 100%;
        text-transform: uppercase;
        font-size: 5.56vw;
        line-height: 104px;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
      }
      //后退
      .left-transition {
        animation: left-remove 0.5s linear alternate; /* 定义动画 */
        // animation: 动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
      }
      @keyframes left-remove {
        0% {
          transform: translateX(-460px);
          opacity: 0;
          transition: 0.6s all ease;
        }
      }
      //前进
      .right-transition {
        animation: right-remove 0.5s linear alternate; /* 定义动画 */
      }
      @keyframes right-remove {
        0% {
          transform: translateX(-460px);
          opacity: 0;
          transition: 0.6s all ease;
        }
      }

      .slider-item-text {
        color: #fff;
        width: 49%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        right: 0;
        position: absolute;
      }
    }
  }
}
</style>
